<!--
 * @Author: GongSaiPeng
 * @Date: 2024-04-15 09:37:41
 * @LastEditTime: 2024-04-15 09:53:44
 * @LastEditors: GongSaiPeng
 * @Description: 使用openlayer接入地图
 * @FilePath: \main-app\src\components\openlayer\index.vue
-->
<template>
  <div id="map" ref="mapElement"></div>
</template>
<script setup>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import { fromLonLat } from "ol/proj";
import { onMounted, ref } from "vue";

const mapElement = ref(null);
const initMap = () => {
  // 创建高德地图的 XYZ 瓦片源
  const amapSource = new XYZ({
    // url: "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
    url: "http://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}&lang=zh_cn&scale=1&size=1",
    // 高德地图的瓦片服务可能有不同的 URL 格式和参数，这里是一个示例
  });
  // 创建 OpenLayers 图层，使用上面创建的瓦片源
  const amapLayer = new TileLayer({
    source: amapSource,
  });
  // 创建 OpenLayers 地图实例
  const map = new Map({
    target: mapElement.value,
    layers: [amapLayer],
    view: new View({
      center: fromLonLat([116.397428, 39.90923]), // 设置地图中心点坐标（例如：北京）
      zoom: 8, // 设置初始缩放级别
      // projection:"EPSG:4326"
    }),
  });
};
onMounted(() => {
  initMap();
  //   设置地图宽高
  let maps = document.getElementById("map");
  maps.style.width = window.innerWidth + "px";
  maps.style.height = window.innerHeight + "px";
});
</script>
<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>
